/**
* component TextInput
* prefix .mui-textinput
*/
textarea.mui-textinput {
  padding-top: 8px!important;
  padding-bottom: 8px!important;
}
.mui-textinput {
  // default height = 36px
  font-size: 14px;
  line-height: 20px;
  background-color: #fff;
  border: solid 1px #ccc;
  border-radius: 3px;
  padding: 7px 12px;
  vertical-align: bottom;
  box-sizing: border-box;
  color: #333;
  &::-webkit-input-placeholder {
    color:#dcdcdc;
  }
  &:-moz-placeholder {
    color:#dcdcdc;
  }
  &::-moz-placeholder {
    color:#dcdcdc;
  }
  &:-ms-input-placeholder {
    color:#dcdcdc;
  }
  &:hover {
    border-color: #bbb;
  }
  // error state
  &.mui-textinput-error {
    border-color: #f44336;
  }
  &:disabled {
    background-color: #f5f5f5;
    border-color: #f5f5f5 !important;
    cursor: not-allowed;
    resize: none;
  }
  &-unit-box {
    &.placeholder{
      color: #dcdcdc;
    }
    & > input {
      width: 100%;
      min-height: 36px;
    }
    position: relative;
    width: 100%;
    &.number {
      width: 100%;
      display: inline-block;
      min-height: 36px;
      padding: 8px 9px;
      padding-left: 0;
      font-size: 14px;
      line-height: 20px;
      box-sizing: border-box;
      word-break: break-all;
      .hint{
        width: 50px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  &-unit {
    height: 100%;
    right: 10px;
    position: absolute;
    display: flex;
    top: 0;
    align-items: center;
  }
}

.mui-textinput-content {
  font-size: 14px;
  line-height: 20px;
  padding: 8px 0;
  width: 100%;
  box-sizing: border-box;
  word-break: break-all;
  min-height: 36px;
  white-space: pre-wrap;
  .placeholder{
    color: #dcdcdc;
  }
  .smallInput {
    width: 1px;
    height: 18px;
    vertical-align: top;
    border: none;
    display: inline-block;
  }
}
